<template>
  <q-card class="bg-transparent no-shadow no-border">
    <q-card-section class="row q-pa-sm">
      <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
        <div class="text-h6 float-left q-ml-md q-mt-sm">表格分页</div>
      </div>
    </q-card-section>
    <q-card-section>
      <q-item
        v-for="msg in getListData"
        class="bg-white"
        :key="msg.id"
        clickable
        v-ripple
      >
        <q-item-section avatar>
          <q-avatar>
            <img :src="msg.avatar" />
          </q-avatar>
        </q-item-section>

        <q-item-section>
          <q-item-label>{{ msg.name }}</q-item-label>
          <q-item-label caption lines="1">{{ msg.msg }}</q-item-label>
        </q-item-section>

        <q-item-section side>
          {{ msg.time }}
        </q-item-section>
      </q-item>
    </q-card-section>
    <q-card-actions align="center">
      <q-pagination
        v-model="page"
        :min="currentPage"
        :max="Math.ceil(list_Data.length / totalPages)"
        :input="true"
        input-class="text-orange-10"
      >
      </q-pagination>
    </q-card-actions>
  </q-card>
</template>

<script setup lang="ts">
import { baseImg, baseImg2 } from 'src/pages/data/list';
import { ref, computed } from 'vue';

const list_Data = [
  {
    id: 5,
    name: '小P',
    msg: '我以前喜欢过你” “略有耳闻',
    avatar: baseImg,
    time: '10:42 下午',
  },
  {
    id: 6,
    name: '小W',
    msg: '我以前喜欢过你” “略有耳闻',
    avatar: baseImg2,
    time: '11:17 上午',
  },
  {
    id: 1,
    name: '小Y',
    msg: '我以前喜欢过你” “略有耳闻',
    avatar: baseImg2,
    time: '5:17 上午',
  },
  {
    id: 2,
    name: '小J',
    msg: '我以前喜欢过你” “略有耳闻',
    avatar: baseImg2,
    time: '5:17 上午',
  },
  {
    id: 3,
    name: '小R',
    msg: '我以前喜欢过你” “略有耳闻',
    avatar: baseImg2,
    time: '5:17 上午',
  },
  {
    id: 1,
    name: '小O',
    msg: '我以前喜欢过你” “略有耳闻',
    avatar: baseImg2,
    time: '5:17 上午',
  },
  {
    id: 2,
    name: '小G',
    msg: '我以前喜欢过你” “略有耳闻',
    avatar: baseImg2,
    time: '5:17 上午',
  },
  {
    id: 5,
    name: '小T',
    msg: '我以前喜欢过你” “略有耳闻',
    avatar: baseImg2,
    time: '10:42 下午',
  },
];

const page = ref(1);
const currentPage = ref(1);
const totalPages = ref(5);

const getListData = computed(() => {
  return list_Data.slice(
    (page.value - 1) * totalPages.value,
    (page.value - 1) * totalPages.value + totalPages.value
  );
});
</script>

<style scoped></style>
